<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        /* var n = 999;
        function f1() {
            alert(n);
        }
        f1(); // 999 函数内部可以直接读取全局变量
 */


        /*    function f1() {
               var n = 999;
           }
           alert(n); //  n is not defined  error
           // 函数外部无法读取函数内部的局部变量 */


        /* 
                function f1() {
                    n = 999;
                }
                f1();
                alert(n); // 999
        
                // 函数内部声明变量时 需要用var命令 如果不用 实际上声明了一个全局变量
         */



        // 如何从外部读取局部变量： ————即 在函数内部 再定义一个函数

        /*     function f1() {
                var n = 999;
                function f2() {
                    alert(n);
                }
                return f2;
            }
            var result = f1();
            result();  // 999
    
     */

        /*
        既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了
        */


        /*
        关于闭包：
               "闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

                由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

                所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁


        作用： 
                1. 读取函数内部的变量
                2.让这些变量的值始终保持在内存中
        */


        /*   function f1() {
              var n = 999;
              nAdd = function () { n += 1 }
              function f2() {
                  alert(n);
              }
              return f2;
          }
          var result = f1();
          result(); // 999
          nAdd();
          result(); // 1000 */


        /*  var name = "The Window";
 
         var object = {
             name: "My Object",
 
             getNameFunc: function () {
                 return function () {
                     return this.name;
                 };
 
             }
 
         };
 
         alert(object.getNameFunc()()); // the window */


        var name = "The Window";

        var object = {
            name: "My Object",

            getNameFunc: function () {
                var that = this;
                return function () {
                    return that.name;
                };

            }

        };

        alert(object.getNameFunc()());
    </script>
</body>

</html>